<template>
	<view class="car">
		<u-form :model="carForm" ref="uForm" class="carForm">
			<!-- 车牌号 -->
			<u-form-item label="车号" class="carNum layout">
				<u-input v-model="carForm.carNum" border trim prop='carName' placeholder='请输入车牌号' />
			</u-form-item>
			<!-- 车辆颜色 -->
			<u-form-item label="颜色" class="carColor layout">
				<u-input v-model="carForm.carColor" type="select" border trim placeholder='请输入车辆颜色'
					@click="show = true" />
				<u-select v-model="show" mode="single-column" :list="list" @confirm="confirm"></u-select>
			</u-form-item>
			<!-- 车辆类型 -->
			<u-form-item label="类型" class="carType layout">
				<u-input v-model="carForm.carType" border trim placeholder='请输入车辆类型' />
			</u-form-item>
		</u-form>
		<u-button @click="addCar" class="button" type="primary">添加车辆</u-button>
		<u-toast ref="uToast" />
	</view>
</template>

<script>
	export default {
		data() {
			return {
				carForm: {
					carNum: '',
					carColor: '',
					carType: ''
				},
				show: false, //是否打开下拉框
				list: [{
						value: '黑色',
						label: '黑色'
					},
					{
						value: '白色',
						label: '白色'
					},
					{
						value: '灰色',
						label: '灰色'
					},

					{
						value: '银色',
						label: '银色'
					}, {
						value: '金色',
						label: '金色'
					},
					{
						value: '其他',
						label: '其他'
					}
				],
				// disabled:false
			}
		},
		methods: {
			confirm(e) {
				this.carForm.carColor = e[0].value
			},
			addCar() {
				if (this.carForm.carNum == '' || !this.$u.test.carNo(this.carForm.carNum)) {
					this.$refs.uToast.show({
						title: '请填写正确的车牌号',
						type: 'warning',
						position: 'bottom'
					})
				} else if (this.carForm.carColor == '') {
					this.$refs.uToast.show({
						title: '请填写车辆颜色',
						type: 'warning',
						position: 'bottom'
					})
				} else if (this.carForm.carType == '') {
					this.$refs.uToast.show({
						title: '请填写车辆类型',
						type: 'warning',
						position: 'bottom'
					})
				} else {
					this.$u.api.addCar({
						car_num: this.carForm.carNum,
						color: this.carForm.carColor,
						car_type: this.carForm.carType
					})
					this.$refs.uToast.show({
						title: '添加成功',
						type: 'success',
						position: 'bottom',
						url: '/pages/car/myCar'
					})
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	page {
		background-color: $page-color;
	}

	.car {
		margin: 40rpx 5%;

		.carForm {
			height: 450rpx;

			.carNum {}

			.carColor {}

			.carType {}

			.layout {
				background-color: #FFFFFF;
				margin-top: 20rpx;
			}
		}


		.button {
			margin-top: 20rpx;
		}
	}
</style>
